<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉框示例</title>
	 <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.min.css">
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script src="../jquery-tag-demo.js" type="text/javascript"></script>
</head>
<body>
	<h2>组合框</h2>
    <h3>说明:</h3>
	<span>组合（combo）是在 html 页面上显示一个可编辑的文本框和下拉面板。它是用于创建其他复杂的组合组件（比如：组合框 combobox、组合树 combotree、组合网格 combogrid，等等）的基础组件。</span>
	<br>
	<p>组合（combo）可以使用 javascript 从 &lt;select&gt; 或 &lt;input&gt; 元素进行创建。请注意，<span style="color:red;">从标记创建组合（combo）是无效的</span>。</p>
    <h3>如：</h3>
    <div class="demo-exp-code entry-content">
		<input id="cc" placeholder="空面板">
		<pre class="prettyprint hide lang-html"><code>&lt;input id="cc" placeholder="空面板"&gt;
&lt;script type="text/javascript"&gt;
$(function(){
	var ccObj=$HUI.combo('#cc',{});
});
&lt;/script&gt;</code></pre>
		<style>
			#sp input{
				margin: 5px 10px;
			}
		</style>
		<select id="cc2" style="width:150px"></select>
		<div id="sp">
			<div style="color:#000000;background:#fafafa;padding:5px;">Select a language</div>
			<div style="padding:10px">
				<input class='hisui-radio' type="radio" name="lang" value="01" label='Java'><br/>
				<input class='hisui-radio' type="radio" name="lang" value="02" label='Ruby'><br/>
				<input class='hisui-radio' type="radio" name="lang" value="03" label='Basic'><br/>
				<input class='hisui-radio' type="radio" name="lang" value="04" label='Cache'><br/>
				<input class='hisui-radio' type="radio" name="lang" value="05" label='HTML'><br/>
				<input class='hisui-radio' type="radio" name="lang" value="06" label='CSS'>
			</div>
		</div>
		<pre class="prettyprint hide lang-html"><code>&lt;select id="cc2" style="width:150px"&gt;&lt;/select&gt;
&lt;div id="sp"&gt;
	&lt;div style="color:#99BBE8;background:#fafafa;padding:5px;"&gt;Select a language&lt;/div&gt;
	&lt;div style="padding:10px"&gt;
		&lt;input class='hisui-radio' type="radio" name="lang" value="01" label='Java'&gt;&lt;br/&gt;
		&lt;input class='hisui-radio' type="radio" name="lang" value="02" label='Ruby'&gt;&lt;br/&gt;
		&lt;input class='hisui-radio' type="radio" name="lang" value="03" label='Basic'&gt;&lt;br/&gt;
		&lt;input class='hisui-radio' type="radio" name="lang" value="04" label='Cache'&gt;&lt;br/&gt;
		&lt;input class='hisui-radio' type="radio" name="lang" value="05" label='HTML'&gt;&lt;br/&gt;
		&lt;input class='hisui-radio' type="radio" name="lang" value="06" label='CSS'&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
		<pre class="prettyprint hide lang-js"><code>$(function(){
	var cc2Obj=$HUI.combo('#cc2',{editable:false,placeholder:'输入查询条件'});
	$('#sp').appendTo(cc2Obj.panel());
	$('#sp input').radio({onCheckChange:function(e,v){
		var v = $(this).val();
		var l = $(this).attr('label');
		cc2Obj.setValue(v);
		cc2Obj.setText(l);
		cc2Obj.hidePanel();
	}});
});</code></pre>

		
	</div><!--demo-exp-code entry-content-->
	<script type="text/javascript">
		$(function(){
			var ccObj=$HUI.combo('#cc',{});
			
			/*
			$('#cc2').combo({
				required:true,
				editable:false
			});
			$('#sp').appendTo($('#cc2').combo('panel'));
			$('#sp input').click(function(){
				var v = $(this).val();
				var s = $(this).next('span').text();
				$('#cc2').combo('setValue', v).combo('setText', s).combo('hidePanel');
			});
			*/
			var cc2Obj=$HUI.combo('#cc2',{editable:false,placeholder:'输入查询条件'});
			$('#sp').appendTo(cc2Obj.panel());
			$('#sp input').radio({onCheckChange:function(e,v){
				var v = $(this).val();
				var l = $(this).attr('label');
				cc2Obj.setValue(v);
				cc2Obj.setText(l);
				cc2Obj.hidePanel();
			}});
		});
  </script>
    <table class="table">
		<tr class="protitle">
			<th>属性</th>
			<th>说明</th>
			<th>默认值</th>
			<th></th>
		</tr>
		<tr>
			<td>enterNullValueClear</td>
			<td>默认值true。当为false时，在输入框内回车，没有匹配值不清空输入框。</td>
			<td>true</td>
			<td></td>
		</tr>
		<tr>
			<td>placeholder</td>
			<td>默认值""</td>
			<td>当不为空时，在输入框显示placeholder,<code>IE9+</code>,<code>chrome</code>支持。</td>
			<td></td>
		</tr>
	</table>
  <prettyprint/>
</body>
</html>